@extends('layout.app')

@section('title', 'Form Event')

{{--@section('sidebar')
    @parent
    <p>this text is append to sidebar</p>
@endsection--}}

@section('content')
    <div class="container">
        <div class="card d-flex mt-3">
            <div class="card-header m-lg-0">
                <div class="card-title">Iteration</div>
            </div>
            <div class="card-body" id="event-1">
                <article id="component-1">
                    <form  @submit.prevent="addMessage">
                        <input id="message" v-model="message" />
                        <button type="submit">Add</button>
                    </form>
                    <p><button @click="warn('this is test warning message', $event)">Click</button></p>
                    <p><button @click.once="once('this is once event', $event)">Once Click</button></p>
                    <p><input @keyup.prevent="keyEvent('this is once event', $event)" val="Key Event" /></p>
                    <ul class="items list-unstyled mt-3 d-flex flex-row">
                        <li class="p-2" is="message-item"
                            v-for="(item, index) in messageList"
                            v-bind:id="item.id"
                            v-bind:title="item.title" v-on:remove="messageList.splice(index, 1)"></li>
                    </ul>
                </article>
                <article id="component-2">
                    <div id="emit-example-argument">
                        <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">@{{advice}}</p>
                    </div>
                </article>
            </div>
        </div>
    </div>
    <script>
        Vue.component('message-item', {
            props: ['title', 'id'],
            template: "<li><span>@{{title}}</span>"
                + "<button v-on:click='$emit(\"remove\")'>Remove</button></li>"
        });

        var app = new Vue({
            el: "#component-1",
            lastCode:"",
            data: {
                message: "",
                messageList:[
                    {id:1, title: 11111},
                    {id:2, title: 22222},
                    {id:3, title: 33333},
                ],
                nextKey: 0
            },
            methods: {
                warn: function(message, event) {
                    console.log(message);
                    console.log(event);
                },
                once: function(message, event) {
                    console.log(message);
                    console.log(event);
                },
                keyEvent: function(message, e) {
                    if (parseInt(e.keyCode) === 17 && parseInt(this.lastCode) === 65) {
                        //prevent copy
                    }

                    this.lastCode = e.keyCode;
                },
                addMessage: function() {
                    if (this.message) {
                        this.messageList.push({
                            id: this.nextKey++,
                            title: this.message
                        });

                        this.message='';
                    }
                }
            }
        });

        Vue.component('magic-eight-ball', {
            data: function () {
                return {
                    possibleAdvice: ['Yes', 'No', 'Maybe']
                }
            },
            methods: {
                giveAdvice: function () {
                    var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length);
                    this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex]);
                    //this.$parent.advice = this.possibleAdvice[randomAdviceIndex];
                }
            },
            template: `
    <button v-on:click="giveAdvice">
      Click me for advice
    </button>
  `
        });

        new Vue({
            el: '#emit-example-argument',
            data: {
                advice: ""
            },
            methods: {
                showAdvice: function (advice) {
                    this.advice = advice;
                }
            }
        });
    </script>
@endsection


